<template>
  <view class="headerculpture flex column items">
    <view class="headerculpture_image">
      <image :src="userinfo.avatar" alt="" />
    </view>
    <view class="headerculpture_edit flex justify-between">
      <up-button type="primary" class="lk" :plain="true" text="相册上传" @click="tittleUpload"></up-button>
      <up-button type="primary" class="cover" :plain="true" text="保存" @click="editAvatar"></up-button>
    </view>
  </view>
</template>
<script setup>
import { userApi } from "../../api";
//获取用户信息
onLoad(() => {
  getUserInfo();
});
//调用接口获取信息
const userinfo = ref({});
const getUserInfo = () => {
  userApi.userinfo().then((res) => {
    userinfo.value = res.data;
    console.log("cvsdj1", userinfo);
  });
};
// onLoad(()=>{
//   editAvatar()
// })
//头像
const avatar = ref();
// const userInfo = ref({
//   nickname: "",
//   address: "",
//   email: "",
//   avatar: ""
// });
const editAvatar = () => {
  userApi.userinfoedit(userinfo.value).then((res) => {
    uni.showToast({
      title: res.msg,
      icon: "none"
    });
    // getUserInfo();
    uni.navigateBack();
  });
};

const uploadApi = "http://app.antiraedi.com/api/common/upload"; //上传接口
//图片上传
const avatarTittle = ref();
const tittleUpload = () => {
  // userApi.upload()
  uni.chooseImage({
    count: 1, // 图片数量
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //从相册选择或者拍照
    success: (res) => {
      console.log("图片上传", res);
      const tempFilePaths = res.tempFilePaths;
      avatarTittle.value = tempFilePaths[0];
      uni.uploadFile({
        url: uploadApi, //上传图片api
        filePath: tempFilePaths[0],
        header: {
          Authorization: userinfo.token,
          "content-type": "multipart/form-data"
        },
        name: "file",
        success: (res) => {
          let dataInfo = JSON.parse(res.data);

          userinfo.value.avatar = dataInfo.data.url;
          uni.showToast({
            title: dataInfo.msg,
            icon: "none"
          });
        }
      });
    }
  });
};

//用户信息修改
</script>
<style lang="scss" scoped>
.headerculpture {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding: 0rpx 32rpx;

  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  .headerculpture_image {
    width: 368rpx;
    height: 420rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    border-bottom: 2rpx solid #e6e6e6;
    margin-top: 60rpx;
    margin-bottom: 30rpx;
    image {
      width: 368rpx;
      height: 368rpx;
      border-radius: 50%;
    }
  }
  .headerculpture_edit {
    width: 100%;
    .lk {
      width: 333rpx;
      height: 88rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      opacity: 1;
      border: 2rpx solid rgba(0, 0, 0, 0.6);
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.87);
    }
    .cover {
      width: 333rpx;
      height: 88rpx;
      background: #306eff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      opacity: 1;
      border: 2rpx solid #306eff;
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
  }
}
</style>